<template>
  <transition name="dialog-fade">
    <div class="ct-dialog_wrapper" v-show="visible">
      <div
        class="ct-dialog"
        :style="{
          width: width,
          top: top,
          transform: top == '50%' ? 'translate(-50%,-50%)' : 'translateX(-50%)',
        }"
      >
        <div class="ct-dialog_header">
          <slot name="title">
            <span class="ct-dialog_title">{{ title }}</span>
          </slot>
          <button class="ct-dialog_headerbtn" @click="handlerCloseClick">
            <ct-icon icon="xmark" class="ct-icon-close"></ct-icon>
          </button>
        </div>
        <div class="ct-dialog_body">
          <slot></slot>
        </div>
        <div class="ct-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script setup>
import { Transition } from 'vue'
import propsOptions from './props'
defineOptions({
  name: 'CtDialog',
})

const emit = defineEmits(['close'])

const props = defineProps(propsOptions)

function handlerCloseClick() {
  emit('close')
}
</script>
<style lang="scss" scoped></style>
